<template>
	<view v-if="loading" class="bnn-loading">
		<!-- #ifdef APP-PLUS-NVUE -->
		<view class="loading-box">
			<view class="line-scale">
				<image src="https://sou-liang.oss-cn-shanghai.aliyuncs.com/weixin/images/loading.gif" class="load-img"></image>
			</view>
		</view>
		<!-- #endif -->
		
		<!-- #ifndef APP-PLUS-NVUE -->
		<view class="loading-box">
			<view class="line-scale">
				<view class="load-img">
					<image src="https://sou-liang.oss-cn-shanghai.aliyuncs.com/weixin/images/loading.gif"></image>
				</view>
				<!-- <view class="loader"/>
				<view class="loader"/>
				<view class="loader"/>
				<view class="loader"/>
				<view class="loader"/> -->
			</view>
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
	export default {
		props: {
			loading: {
				type: Boolean,
				default: false
			}
		}
	}
</script>

<style lang="scss">
	/* #ifdef APP-PLUS-NVUE */
	.bnn-loading{
		z-index: 1000;
		position: relative;
	}
	.loading-box{
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		position: fixed;
		align-items: center;
		justify-content: center;
		background-color: #fff;
	}
	.load-img{
		width: 276rpx;
		height: 164rpx;
	}
	/* #endif */
	
	
	/* #ifndef APP-PLUS-NVUE */
	.bnn-loading{
		z-index: 1000;
		position: relative;
		.loading-box{
			width: 100%;
			height: 100vh;
			display: flex;
			position: absolute;
			align-items: center;
			justify-content: center;
			background-color: #fff;
		}
		
		.load-img{
			width: 276rpx;
			height: 164rpx;
		}
		
		// @keyframes line-scale {
		// 	0% {transform: scaley(1);}
		// 	50% {transform: scaley(0.4);}
		// 	100% {transform: scaley(1);}
		// }
		
		// .loader{
		// 	background-color: $theme_color;
		// 	width: 8rpx;
		// 	height: 70rpx;
		// 	margin: 4rpx;
		// 	display: inline-block;
		// 	border-radius: 4rpx;
		// 	animation-fill-mode: both;
		// 	&:nth-child(1) {animation: line-scale 1s -0.4s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);}
		// 	&:nth-child(2) {animation: line-scale 1s -0.3s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);}
		// 	&:nth-child(3) {animation: line-scale 1s -0.2s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);}
		// 	&:nth-child(4) {animation: line-scale 1s -0.1s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);}
		// 	&:nth-child(5) {animation: line-scale 1s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);}
		// }
	}
	/* #endif */
</style>